<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
<!DOCTYPE HTML>
<html>
<head>
	<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
	<link type="text/css" rel="stylesheet" href="player.css">
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
</head>

<body onload="load()">
	<div id="playerUI">
		<div id="player"></div>
		<div id="overlay" class="overlay text-light bg-dark">
			<div>
				<div id="qualityStatus" class="greyStatus">&#9679</div>
				<div id="overlayButton">+</div>
			</div>
			<div id="overlaySettings">
				<div id="kickOthers">
					<div class="settings-text">Kick all other players</div>
					<label class="btn-overlay">
						<input type="button" id="kick-other-players-button" class="overlay-button btn-flat" value="Kick">
					</label>
				</div>
				<div id="fillWindow">
					<div class="settings-text">Enlarge Display to Fill Window</div>
					<label class="tgl-switch">
						<input type="checkbox" id="enlarge-display-to-fill-window-tgl" class="tgl tgl-flat" checked>
						<div class="tgl-slider"></div>
					</label>
				</div>
				<div id="qualityControlOwnership">
					<div class="settings-text">Quality control ownership</div>
					<label class="tgl-switch">
						<input type="checkbox" id="quality-control-ownership-tgl" class="tgl tgl-flat">
						<div class="tgl-slider"></div>
					</label>
				</div>
				<br>

				<section id="encoderSettings">
					<div class="settings-text">Encoder Settings</div>
					<div id="encoderParamsContainer" class="collapse">
						<div class="form-group">
							<label for="encoder-rate-control" class="settings-text">Rate Control</label>
							<select id="encoder-rate-control">
								<option value="CBR" selected>CBR</option>
								<option value="VBR">VBR</option>
								<option value="ConstQP">ConstQP</option>
							</select>
							<label for="encoder-target-bitrate-text">Target Bitrate (kbps)</label>
							<input type="number" class="form-control" id="encoder-target-bitrate-text" value="0" min="0" max="100000" />
							<label for="encoder-max-bitrate-text">Max Bitrate (kbps)</label>
							<input type="number" class="form-control" id="encoder-max-bitrate-text" value="0" min="0" max="100000" />
							<label for="encoder-min-qp-text">Min QP</label>
							<input type="number" class="form-control" id="encoder-min-qp-text" value="0" min="0" max="999" />
							<label for="encoder-max-qp-text">Max QP</label>
							<input type="number" class="form-control" id="encoder-max-qp-text" value="0" min="0" max="999" />
							<label for="encoder-multipass" class="settings-text">Multipass</label>
							<select id="encoder-multipass">
								<option value="DISABLED" selected>DISABLED</option>
								<option value="QUARTER">QUARTER</option>
								<option value="FULL">FULL</option>
							</select>
							<div class="settings-text">Filler Data</div>
							<label class="tgl-switch">
								<input type="checkbox" id="encoder-filler-data-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<input id="encoder-params-submit" class="btn btn-primary btn-lg mt-3" type="button" value="Apply">
					</div>
					<br>
				</section>

				<section id="webRTCSettings">
					<div class="settings-text">WebRTC Settings</div>
					<div id="webrtcParamsContainer" class="collapse">
						<div class="form-group">
							<label for="webrtc-degradation-pref">Degradation Pref</label>
							<select id="webrtc-degradation-pref">
								<option value="BALANCED">BALANCED</option>
								<option value="MAINTAIN_FRAMERATE">MAINTAIN_FRAMERATE</option>
								<option value="MAINTAIN_RESOLUTION">MAINTAIN_RESOLUTION</option>
							</select>
							<label for="webrtc-max-fps-text">Max FPS</label>
							<input type="number" class="form-control" id="webrtc-max-fps-text" value="1" min="1" max="999" />
							<label for="webrtc-min-bitrate-text">Min Bitrate (kbps)</label>
							<input type="number" class="form-control" id="webrtc-min-bitrate-text" value="0" min="0" max="100000" />
							<label for="webrtc-max-bitrate-text">Max Bitrate (kbps)</label>
							<input type="number" class="form-control" id="webrtc-max-bitrate-text" value="0" min="0" max="100000" />
							<label for="webrtc-low-qp-text">Low QP Threshold</label>
							<input type="number" class="form-control" id="webrtc-low-qp-text" value="0" min="0" max="999" />
							<label for="webrtc-high-qp-text">High QP Threshold</label>
							<input type="number" class="form-control" id="webrtc-high-qp-text" value="0" min="0" max="999" />
						</div>
						<input id="webrtc-params-submit" class="btn btn-primary btn-lg mt-3" type="button" value="Apply">
					</div>
				</section>
				<br>

				<div id="showFPS">
					<div class="settings-text">Show FPS</div>
					<label class="btn-overlay">
						<input type="button" id="show-fps-button" class="overlay-button btn-flat" value="Toggle">
					</label>
				</div>
				<div id="matchViewportResolution">
					<div class="settings-text">Match Viewport Resolution</div>
					<label class="tgl-switch">
						<input type="checkbox" id="match-viewport-res-tgl" class="tgl tgl-flat">
						<div class="tgl-slider"></div>
					</label>
				</div>

				<div id="statsPanel">
					<div class="settings-text">Show Stats</div>
					<label class="tgl-switch">
						<input type="checkbox" id="show-stats-tgl" class="tgl tgl-flat" checked>
						<div class="tgl-slider"></div>
					</label>
					<div id="statsContainer" class="statsContainer">
						<div id="stats" class="stats"></div>
					</div>
					<br>
				</div>
				
				<div id="latencyTest">
					<div class="settings-text">Latency Stats</div>
					<label class="btn-overlay">
						<input type="button" id="test-latency-button" class="overlay-button btn-flat" value="Test Latency">
					</label>
					<div id="latencyStatsContainer" class="statsContainer">
						<div id=LatencyStats class="stats">No stats yet...</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
